<template>
  <div class="container">
    <ul class="nav">
      <li>全部</li>
      <li @click="show">定制<img src="http://file.rzkeji.com/web/loveciy/img/pull.png" class="pull"/></li>
      <li @click="show">文创<img src="http://file.rzkeji.com/web/loveciy/img/pull.png" class="pull"/></li>
      <li>周边</li>
    </ul>
    <drop1 :animationData="animationData" :type="classifyType"></drop1>
    <ul class="content clearfix">
      <li>
        <img src="http://file.rzkeji.com/web/loveciy/img/classify/colth.png"/>
        <span class="title">【乐自造定制】纯色潮牌T百搭图案等定制</span>
        <div class="price">
           <span class="selling">¥39.00</span>
           <span class="original">¥89.00</span>
        </div>
      </li>
      <li>
        <img src="http://file.rzkeji.com/web/loveciy/img/classify/colth.png"/>
        <span class="title">【乐自造定制】纯色潮牌T百搭图案等定制</span>
        <div class="price">
           <span class="selling">¥39.00</span>
           <span class="original">¥89.00</span>
        </div>
      </li>
      <li>
        <img src="http://file.rzkeji.com/web/loveciy/img/classify/colth.png"/>
        <span class="title">【乐自造定制】纯色潮牌T百搭图案等定制</span>
        <div class="price">
           <span class="selling">¥39.00</span>
           <span class="original">¥89.00</span>
        </div>
      </li>
      <li>
        <img src="http://file.rzkeji.com/web/loveciy/img/classify/colth.png"/>
        <span class="title">【乐自造定制】纯色潮牌T百搭图案等定制</span>
        <div class="price">
           <span class="selling">¥39.00</span>
           <span class="original">¥89.00</span>
        </div>
      </li>
      <li>
        <img src="http://file.rzkeji.com/web/loveciy/img/classify/colth.png"/>
        <span class="title">【乐自造定制】纯色潮牌T百搭图案等定制</span>
        <div class="price">
           <span class="selling">¥39.00</span>
           <span class="original">¥89.00</span>
        </div>
      </li>
      <li>
        <img src="http://file.rzkeji.com/web/loveciy/img/classify/colth.png"/>
        <span class="title">【乐自造定制】纯色潮牌T百搭图案等定制</span>
        <div class="price">
           <span class="selling">¥39.00</span>
           <span class="original">¥89.00</span>
        </div>
      </li>
      <li>
        <img src="http://file.rzkeji.com/web/loveciy/img/classify/colth.png"/>
        <span class="title">【乐自造定制】纯色潮牌T百搭图案等定制</span>
        <div class="price">
           <span class="selling">¥39.00</span>
           <span class="original">¥89.00</span>
        </div>
      </li>
      <li>
        <img src="http://file.rzkeji.com/web/loveciy/img/classify/colth.png"/>
        <span class="title">【乐自造定制】纯色潮牌T百搭图案等定制</span>
        <div class="price">
           <span class="selling">¥39.00</span>
           <span class="original">¥89.00</span>
        </div>
      </li>
      <li>
        <img src="http://file.rzkeji.com/web/loveciy/img/classify/colth.png"/>
        <span class="title">【乐自造定制】纯色潮牌T百搭图案等定制</span>
        <div class="price">
           <span class="selling">¥39.00</span>
           <span class="original">¥89.00</span>
        </div>
      </li>
      <li>
        <img src="http://file.rzkeji.com/web/loveciy/img/classify/colth.png"/>
        <span class="title">【乐自造定制】纯色潮牌T百搭图案等定制</span>
        <div class="price">
           <span class="selling">¥39.00</span>
           <span class="original">¥89.00</span>
        </div>
      </li>
      <li>
        <img src="http://file.rzkeji.com/web/loveciy/img/classify/colth.png"/>
        <span class="title">【乐自造定制】纯色潮牌T百搭图案等定制</span>
        <div class="price">
           <span class="selling">¥39.00</span>
           <span class="original">¥89.00</span>
        </div>
      </li>
      <li>
        <img src="http://file.rzkeji.com/web/loveciy/img/classify/colth.png"/>
        <span class="title">【乐自造定制】纯色潮牌T百搭图案等定制</span>
        <div class="price">
           <span class="selling">¥39.00</span>
           <span class="original">¥89.00</span>
        </div>
      </li>
      <li>
        <img src="http://file.rzkeji.com/web/loveciy/img/classify/colth.png"/>
        <span class="title">【乐自造定制】纯色潮牌T百搭图案等定制</span>
        <div class="price">
           <span class="selling">¥39.00</span>
           <span class="original">¥89.00</span>
        </div>
      </li>
      <li>
        <img src="http://file.rzkeji.com/web/loveciy/img/classify/colth.png"/>
        <span class="title">【乐自造定制】纯色潮牌T百搭图案等定制</span>
        <div class="price">
           <span class="selling">¥39.00</span>
           <span class="original">¥89.00</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import drop1 from '@/components/drop'
export default {
  data () {
    return {
     animationData:{},
      tag:1,
      classifyType:['全部','T恤','童装','童装','童装']
    }
  },

  components: {
      drop1
  },

  methods: {
   show(){
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: 'linear',
    })
    if(this.tag==1)
    {
      animation.height(180).opacity(1).step();
      this.tag=0
    }else{
      animation.height(0).opacity(0).step();
      this.tag=1
    }
     this.animationData=animation.export();
   }
  }
}
</script>

<style scoped>
.container{width: 100%;height: 100%;}
.nav{width:100%;height: 50px;display: flex;justify-content: row;border-bottom: 1px solid #d9d9d9;padding-bottom: 10px;}
.pull{width: 14px;height: 10px;vertical-align: middle;}
.nav li{width: 25%;height: 50px;text-align: center;line-height: 50px;}
.content{width: 96%;margin-left: 3%;}
.content li{width: 48%;margin-right: 2%;float: left;margin-top: 15px;}
.content li img{width: 100%;height:172px; }
.title{width: 100%;line-height: 30px;font-size: 15px;}
.price{width: 100%;height: 30px;font-size: 13px;}
.selling{color: red;}
.original{color: gray;margin-left: 5px}
</style>
